<template>
  <el-dialog :title="title" :width="width" @close="$emit('update:visible',false)" :visible.sync="visible1">
    <el-form :model="form" label-position="left" >
      <el-row>
        <el-col :span="12">
          <div class="dialog-box" style="margin-right:6px;">
            <div class="title">
                提出方信息
            </div>
            <div class="content" >
                <el-col :span="14" >
                  <el-form-item label="部门："  prop="dept" label-width="110px">
                    <el-input clearable style="width: 180px"  placeholder="请输入部门" size="mini" v-model="form.dept" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="姓名：" style="margin-left: 24px;" prop="name" label-width="60px">
                    <el-input clearable style="width: 120px"  placeholder="请输入姓名" size="mini" v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              <el-col :span="24" >
                <el-form-item label="问题："  prop="question" label-width="110px">
                  <el-input :rows="5" type="textarea" clearable style="width: 428px"  placeholder="请输入问题内容" size="mini" v-model="form.question" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="dialog-box" style="margin-left:6px;">
            <span class="title">
                解决方信息
            </span>
            <div class="content" >
              <el-col :span="14" >
                <el-form-item label="部门："  prop="dept1" label-width="110px">
                  <el-select size="mini" v-model="form.dept1">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="姓名：" style="margin-left: 24px;" prop="name" label-width="60px">
                  <el-input clearable style="width: 120px"  placeholder="请输入姓名" size="mini" v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" >
                <el-form-item label="日期："  prop="date" label-width="110px">
                  <day_picker
                    :is-has-button='false'
                    v-model="form.date"
                    format="yyyy-MM-dd"
                    style="width: 270px"
                    placeholder="选择日期"/>
                </el-form-item>
              </el-col>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 12px">
        <el-col :span="12">
          <div class="dialog-box" style="margin-right:6px;height: 460px">
            <div class="title">
              项目信息
            </div>
            <div class="content" >
              <el-col :span="24" >
                <el-form-item label="状态："  prop="question" label-width="110px">
                  <div v-show="form.status" :class="['circle',form.status?form.status==='维护完成'?'circle-color-1':'circle-color-2':'']" ></div>
                  <el-select size="mini" v-model="form.status">
                    <el-option
                      v-for="item in statusOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                 </el-form-item>
              </el-col>
              <el-col :span="24" >
                <el-form-item label="项目名称："  prop="proName" label-width="110px">
                  <el-input  clearable style="width: 260px"  placeholder="请输入项目名称" size="mini" v-model="form.proName" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" >
                <el-form-item label="标签："  prop="tags" label-width="110px">
                  <el-select multiple size="mini" style="width: 300px" v-model="form.tags">
                    <el-option
                      v-for="item in tagOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" >
                <el-form-item label="问题原因："  prop="answer" label-width="110px">
                  <el-input :rows="4" type="textarea" clearable style="width: 428px"  placeholder="请输入问题原因" size="mini" v-model="form.answer" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" >
                <el-form-item label="解决方法："  prop="idea" label-width="110px">
                  <el-input :rows="4" type="textarea" clearable style="width: 428px"  placeholder="请输入解决方法" size="mini" v-model="form.idea" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" >
                <el-form-item label="计划解决时间："  prop="dateTime1" label-width="110px">
                  <day_picker
                    type="datetime"
                    :is-has-button='false'
                    v-model="form.dateTime1"
                    style="width: 270px"
                    placeholder="选择日期"/>
                </el-form-item>
              </el-col>
              <el-col :span="24" >
                <el-form-item label="计划解决时间："  prop="dateTime2" label-width="110px">
                  <day_picker
                    type="datetime"
                    :is-has-button='false'
                    v-model="form.dateTime2"
                    style="width: 270px"
                    placeholder="选择日期"/>
                </el-form-item>
              </el-col>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="dialog-box" style="margin-left:6px;" :style="{height:`${boxHeight}px`}" >
            <span class="title">
                彻底改进信息
            </span>
            <div class="content" >
              <el-col :span="24" >
                <el-form-item label="是否彻底改进："  label-width="110px">
                  <el-switch
                    @change="doSwitch"
                    style="margin-left: 10px"
                    v-model="switchValue"
                    :active-color="$themes.getSwitch().on"
                    :inactive-color="$themes.getSwitch().down">
                  </el-switch>
                </el-form-item>
              </el-col>
              <template v-if="downShow">
                <el-col :span="24" >
                  <el-form-item label="彻底改进措施："  prop="idea" label-width="110px">
                    <el-input :rows="4" type="textarea" clearable style="width: 428px"  placeholder="请输入解决方法" size="mini" v-model="form.idea" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" >
                  <el-form-item label="完成日期："  prop="finishDate" label-width="110px">
                    <day_picker
                      :is-has-button='false'
                      v-model="form.finishDate"
                      format="yyyy-MM-dd"
                      style="width: 270px"
                      placeholder="选择日期"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24" >
                  <el-form-item label="完成情况："  prop="finishInfo" label-width="110px">
                    <el-input clearable style="width: 270px"  placeholder="请输入完成情况" size="mini" v-model="form.finishInfo" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </template>

            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" >
    <el-button size="mini" @click="visible1 = false">取 消</el-button>
    <el-button size="mini" type="primary" @click="visible1 = false">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
export default {
  name: "new-dialog",
  props:{
    title:String,
    visible:{
      type:Boolean,
      default:false
    },
    width:{
      type:String,
      default:'50%'
    },
  },
  watch:{
    visible(){
      this.visible1 = this.visible
    }
  },
  data(){
    return {
      visible1:false,
      form:{
        dept:'',
        name:'',
        question:'',
        dept1:'',
        date:'',
        status:'',
        proName:'',
        answer:'',
        tags:[],
        idea:'',
        dateTime1:'',
        dateTime2:'',
        finishDate:'',
        finishInfo:'',
      },
      switchValue:true,
      downShow:true,
      statusOption:[
        {
          label:'维护完成',
          value:'维护完成',
        },
        {
          label:'维护没完成',
          value:'维护没完成',
        }
      ],
      options:[
        {
          label:'数字化开发组',
          value:'数字化开发组',
        },
        {
          label:'别的开发组',
          value:'别的开发组',
        }
      ],
      tagOptions:[
        {
          label:'钢后',
          value:'钢后',
        },
        {
          label:'能源',
          value:'能源',
        }
      ]
    }
  },
  computed:{
    boxHeight(){
      return this.switchValue?288:60;
    },
  },

  methods:{
    doSwitch(){
      if(this.switchValue){
        setTimeout(()=>{
          this.downShow = true
        },200)
      }else{
        this.downShow = false
      }
    }
  },
};
</script>

